<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>DPL: 图标</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge;Chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/skin/frontend/uemall_v2/mobile/css/dpl.css">
<link rel="stylesheet" href="/skin/frontend/uemall_v2/mobile/css/dpl/dpl-demo.css">
</head>

<body class="cmWrapper dpl-demo-icon">
<article class="cmPage">
	<header class="cmPageNavBar">
		<h1>图标</h1>
		<div class="cmBtnWrapper cmRight">
			<a class="cmBtn" href="javascript:location.reload();">刷新</a>
		</div>
		<div class="cmBtnWrapper cmLeft">
			<a class="cmBtn cmBack" href="../"><b>DPL</b></a>
		</div>
	</header>
	<section class="x20">
		<h2>按钮图标 (20x20) in 30x30</h2>
		<dl class="cmClr">
			<dt class="black-bg">
				<i class="cmIcon cmX20 loading-black-bg">Loading</i>
			</dt>
			<dd>正在载入 (黑底)</dd>
			<dt class="white-bg">
				<i class="cmIcon cmX20 loading-white-bg">Loading</i>
			</dt>
			<dd>正在载入 (白底)</dd>
			<dt>
				<i class="cmIcon cmX20 jump-to-top"><b></b><b></b>回到顶部</i>
			</dt>
			<dd>回到顶部</dd>
			<dt>
				<i class="cmIcon cmX20 back"><b></b><b></b>back</i>
			</dt>
			<dd>返回/后退</dd>
			<dt>
				<i class="cmIcon cmX20 home"><b></b><b></b>首页</i>
			</dt>
			<dd>首页</dd>
			<dt>
				<i class="cmIcon cmX20 close">X</i>
			</dt>
			<dd>关闭</dd>
			<dt>
				<i class="cmIcon cmX20 info"><b></b>i</i>
			</dt>
			<dd>信息</dd>
			<dt>
				<i class="cmIcon cmX20 add">+</i>
			</dt>
			<dd>加</dd>
			<dt>
				<i class="cmIcon cmX20 action"><b></b><b></b>[^]</i>
			</dt>
			<dd>动作</dd>
		</dl>
	</section>
	<section class="x30">
		<h2>菜单图标 (30x30) in 40x40</h2>
		<dl class="cmClr">
			<dt class="black-bg">
				<i class="cmIcon cmX30 loading-black-bg">Loading</i>
			</dt>
			<dd>正在载入 (黑底)</dd>
			<dt class="white-bg">
				<i class="cmIcon cmX30 loading-white-bg">Loading</i>
			</dt>
			<dd>正在载入 (白底)</dd>
			<dt>
				<i class="cmIcon cmX30 home"><b></b><b></b>首页</i>
			</dt>
			<dd>首页</dd>
			<dt>
				<i class="cmIcon cmX30 ellipsis"><b></b><b></b><b></b>...</i>
			</dt>
			<dd>省略号</dd>
			<dt>
				<i class="cmIcon cmX30 search"><b></b><b></b>搜索</i>
			</dt>
			<dd>搜索</dd>
			<dt>
				<i class="cmIcon cmX30 user"><b></b><b></b>user</i>
			</dt>
			<dd>用户</dd>
			<dt>
				<i class="cmIcon cmX30 user-outline"><b></b><b></b>user outline</i>
			</dt>
			<dd>用户 (未登录)</dd>
			<dt>
				<i class="cmIcon cmX30 notice">喇叭</i>
			</dt>
			<dd>喇叭</dd>
			<dt>
				<i class="cmIcon cmX30 info"><b></b>i</i>
			</dt>
			<dd>信息</dd>
			<dt>
				<i class="cmIcon cmX30 close">X</i>
			</dt>
			<dd>关闭</dd>
		</dl>
	</section>
	<section class="x40">
		<h2>大图标 (40x40) in 60x60</h2>
		<dl class="cmClr">
			<dt class="black-bg">
				<i class="cmIcon cmX40 loading-black-bg">Loading</i>
			</dt>
			<dd>正在载入 (黑底)</dd>
			<dt class="white-bg">
				<i class="cmIcon cmX40 loading-white-bg">Loading</i>
			</dt>
			<dd>正在载入 (白底)</dd>
			<dt>
				<i class="cmIcon cmX40 jump-to-top"><b></b><b></b>回到顶部</i>
			</dt>
			<dd>回到顶部</dd>
			<dt>
				<i class="cmIcon cmX40 close">X</i>
			</dt>
			<dd>关闭</dd>
		</dl>
	</section>
	<section class="x50">
		<h2>大图标 (50x50) in 60x60</h2>
		<dl class="cmClr">
			<dt class="black-bg">
				<i class="cmIcon cmX50 loading-black-bg">Loading</i>
			</dt>
			<dd>正在载入 (黑底)</dd>
			<dt class="white-bg">
				<i class="cmIcon cmX50 loading-white-bg">Loading</i>
			</dt>
			<dd>正在载入 (白底)</dd>
		</dl>
	</section>
	<hr>
	<section>
		<a class="cmBtn" href="javascript:location.reload();">刷新</a>
	</section>
	<hr>
	<footer>
		<address>&copy; UEFED.COM</address>
	</footer>
</article>
<script src="/js/mv1/lib/lib.js"></script>
<script src="/js/mv1/lib/dpl.js"></script>
<script>_.ext.ini(); DPL.ini(); _.ga.ini();</script>
</body>
</html>
